<template>
	<view>
		<view class="mui-content">
			<!-- 这里是未登录 -->
			<view class="userinfo" id="login" style="margin-bottom: 20px;" v-if="!logined">
				<image src="../../static/center/ve.png" style="border-radius: 30px;width: 80px;height: 80px;margin-top: 10px;" />
				<view class="userName" @click="login()">
					立即登录
				</view>
				<view style="margin-top: 22px;">
					<hr />
				</view>
			</view>
			<view class="userinfo" id="userinfo" v-if="logined">
				<image :src="swichIcon(userinfo.icon)" style="border-radius: 40px;width: 80px;height: 80px;margin-top: 10px;" />
				<view class="userName" @click="updateName(userinfo.usersName)">{{userinfo.usersName}}</view>
				<view id='alertBtn' style="font-size:14px;color:black;" @click="goJifenRecord()">
					积分:<span id="jifen">{{userinfo.usersIntegral}}</span>
				</view>
			</view>
			<view class="box-b" style="padding-top:5px;background-color: #EFEFF4;">
				<button type="button">
					直推：<span id="zhitui">{{userinfo.userstuinumber}}</span><span>{{kongge}}</span>
					团队：<span id="tuandui">{{userinfo.userstuannumber}}</span>
				</button>
			</view>
			<view class="box-c" style="margin-top: -20px;">
				<view class="box-c-1" id="Top-Up" @click="wddd()">
					<view class="box-c-2">
						<image src="../../static/center/chongzhi.png" style="width: 100%;height: 100%;">
					</view>
					<p>
						我的订单
					</p>
				</view>
				<view class="box-c-1" @click="kjls()">
					<view class="box-c-2" id='address'>
						<image src="../../static/center/address.png" style="width: 100%;height: 100%;">
					</view>
					<p>
						开奖历史
					</p>
				</view>
				<view class="box-c-1" @click="zjdd()">
					<view class="box-c-2" id='win_orders'>
						<image src="../../static/center/dfh2.png" style="width: 100%;height: 100%;">
					</view>
					<p>
						中奖订单
					</p>
				</view>
				<view class="box-c-1" @click="myLuckbi()">
					<view class="box-c-2">
						<image src="../../static/center/dashang.png" style="width: 100%;height: 100%;">
					</view>
					<p>我的幸运币</p>
				</view>
				<view class="box-c-1" @click="jifenduihuan()">
					<view class="box-c-2">
						<image src="../../static/center/jifenduihuan.png" style="width: 100%;height: 100%;">
					</view>
					<p>
						积分兑换
					</p>
				</view>
			</view>
			<view style="width:100%;height:100%;background:url(../../static/center/empty.png);display:flex;align-items:center;justify-content:center;position:fixed;top:0px;left:0px;display: none;"
				id="pay">
				<view
					style="width:250px;height:160px;background:white;border-radius:8px;box-shadow:0px 0px 5px 5px #f1f1f126;">
					<view style="width:100%;height:30px;display:flex;align-items:center;" @click="closePay()">
						<view style="width:20px;height:20px;margin-left:10px;">
							<img src="../../static/center/close.png" style="width:100%;height:100%;" />
						</view>
					</view>
					<view id="nick"
						style="height:20px;margin-top:0px;line-height:30px;text-align:center;width:100%;font-size:12px;">
						新梦想
					</view>
					<view style="width:100%;height:50px;line-height:50px;font-size:25px;font-weight:bold;text-align:center;border-bottom:1px solid #f7f7f7;"
						id="jine">
						50.0
					</view>
					<view @click="payJifen()"
						style="width:200px;height:30px;line-height:30px;text-align:center;margin:13px auto;background:#1bd41b;color:white;font-size:13px;border-radius:3px;">
						立即支付
					</view>
				</view>
			</view>
		</view>
		<!-- <u-tabbar v-model="current" :list="list" :mid-button="false"></u-tabbar> -->
		<view class="tabbar">
			<view style="text-align: center;" @click="tabbarPage(0)">
				<uni-icons type="home" size="20"></uni-icons>
				<view>首页</view>
			</view>
			<view style="text-align: center;color: #FF7900;">
				<uni-icons type="person" color="#FF7900" size="20"></uni-icons>
				<view>个人中心</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{},	//用户信息
				logined:false,	//是否登录
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/xingyun/index"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/xingyun/center/center"
					},
				],
				current: 1,
				kongge:' ',		//空格
			}
		},
		onLoad() {
			this.getXingyunUserInfo();
			uni.$on("getXingyunUserInfo",this.getXingyunUserInfo);
		},
		methods: {
			//底部tab跳转
			tabbarPage(index){
				uni.redirectTo({
					url:index==0?'../index':'center'
				})
			},
			//得用户信息
			getXingyunUserInfo(){
				this.userinfo = uni.getStorageSync('userinfo');
				this.logined = uni.getStorageSync('logined');
			},
			//跳转我的订单页面
			wddd(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'myOrder'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//跳转开奖历史界面
			kjls(){
				uni.navigateTo({
					url:'history'
				})
			},
			//跳转到中奖订单页面
			zjdd(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'winOrder'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//跳转到我的幸运币页面
			myLuckbi(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'myLuckbi'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//跳转到积分兑换页面
			jifenduihuan(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'jifenDuihuan'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//处理用户头像
			swichIcon(icon){
				if(this.isNull(icon)){
					let xcxIcon = uni.getStorageSync('xcxIcon');
					if(this.isNull(xcxIcon)){
						return '../../static/center/ve.png';
					}
					return xcxIcon;
				}else{
					return this.host+icon;
				}
			},
			//立即登录
			login(){
				uni.navigateTo({
					url:'../../pages/center/login'
				})
			},
			//修改用户名
			updateName(usersName){
				uni.navigateTo({
					url:'../../pages_jifen/center/updateName?usersName='+usersName
				})
			},
			//查看积分记录
			goJifenRecord(){
				uni.navigateTo({
					url:'../../pages_jifen/center/jifenZhuanRang'
				})
			},
			//清除支付
			closePay(){
				console.log("点击清除支付了")
			},
			//支付积分
			payJifen(){
				console.log("点击立即支付了")
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>
	#jifen{
		padding: 1px 2px;
		background-color: red;
		color: white;
		border-radius: 4px;
	}
	.tabbarImage{
		width: 20px;
		height: 20px;
	}
	.tabbar{
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		justify-content: space-around;
		background-color: white;
		font-size: 11px;
		padding: 20rpx 0 20rpx 0;
		border-top: 1rpx #DCDFE6 solid;
		}
		
	html {
		overflow-x: hidden;
		overflow-y: hidden;
		height: 100%;
	}
	body {
		overflow-x: hidden;
		overflow-y: hidden;
		height: 100%;
	}
	.nav-header {
		background-color: #000000;
		color: white;
	}
	.nav-header h1 {
		text-align: left;
		padding-left: 25px;
	}
	.nav-header a {
		color: white;
	}
	.box-b {
		height: 70px;
		text-align: center;
		border-bottom: 1px solid #efeff4;
	}
	.box-b button {
		margin-top: 5px;
		border-radius: 30px;
		width: 80%;
		height: 30px;
		font-size: 14px;
		border: 1rpx #007aff solid;
		color: #007aff;
		line-height: 30px;
	}
	.box-c {
		overflow: hidden;
		background: white;
		height: 500px;
	}
	.box-c-1 {
		width: 25%;
		height: 72px;
		float: left;
		text-align: center;
		padding: 5px 0;
		border-right: 1px solid #efeff4;
		border-bottom: 1px solid #efeff4;
	}
	.box-c-1 img {
		width: 100%;
		height: 100%;
	}
	.box-c-2 {
		margin: 10px auto;
		height: 26px;
		width: 26px;
	}
	.box-c-1 p {
		font-size: 10px;
		margin-top: -3px;
		padding: 0px;
	}
	.userinfo {
		text-align: center;
		background: whitesmoke;
		height: 140px;
	}
	.userinfo img {
		width: 80px;
		height: 80px;
		margin-top: 10px;
	}
	.userName {
		font-size: 16px;
		color: black;
		margin-bottom: -1px;
	}
	#alertBtn {}
</style>
